<template>
	<div>
		<div class="back">
			<div class="flex">
				<div>姓名:蒋峰</div>
				<div>性别:女</div>
				<div>年龄:24岁</div>
			</div>
			<div class="same">
				<div><span>入院日期:</span><span class="left">2020-08-10</span></div>
				<div><span>出院日期:</span><span class="left">2020-08-13</span></div>
				<div><span>住院天数:</span><span class="left">4天</span></div>
			</div>
			<div>
				<img src="https://cdn7.axureshop.com/demo/1634752/images/%E8%B4%B9%E7%94%A8%E8%AF%A6%E6%83%85/u1116.svg"
					alt="">
			</div>
			<div class="right"><span>合计:</span><span>￥1450.00</span></div>
		</div>
		<div class="back" style="background: #fff;" @click="list">
			<div class="date">日期</div>
			<div class="flex1">
				<div>2020-08-13</div>
				<div>￥1000.00</div>
			</div>
			<div class="flex1">
				<div>2020-08-12</div>
				<div>￥150.00</div>
			</div>
			<div class="flex1">
				<div>2020-08-11</div>
				<div>￥150.00</div>
			</div>
			<div class="flex2">
				<div>2020-08-10</div>
				<div>￥150.00</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			list() {
				uni.navigateTo({
					url: "../../../hospitalizationServices/pages/recharge/record"
				})
			}

		}
	}
</script>

<style>
	.flex2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 10px;
		font-size: 14px;
	}

	.flex1 {
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 0;
		border-bottom: 1px solid rgba(242, 242, 242, 1);
	}

	.date {
		color: #AAAAAA;
		font-size: 14px;
		border-bottom: 1px solid rgba(242, 242, 242, 1);
		padding-bottom: 10px;
	}

	.right span:nth-child(2) {
		font-size: 16px;
		color: rgb(244, 12, 128);
	}

	.right span:nth-child(1) {
		font-size: 14px;
	}

	.right {
		margin-left: 205px;
		margin-top: 10px;
	}

	.left {
		margin-left: 5px;
	}

	.same div:nth-child(3) {
		margin-top: 8px;
	}

	.same div:nth-child(2) {
		margin-top: 8px;
	}

	.same {
		margin: 15px 0 0 0;
		color: #AAAAAA;
		font-size: 14px;

	}

	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 16px;

	}

	.back {
		background: rgb(245, 249, 255);
		margin: 20px 15px;
		border-radius: 5px;
		padding: 15px 10px;
		border: 1px solid #f2f2f2;
	}
</style>